import React from "react";
import { useNavigate } from "react-router-dom";

export default function Yao() {
  let Navigate = useNavigate();
  return (
    <div>
      <p
        style={{ fontSize: "20px", margin: "20px " }}
        onClick={() => {
          Navigate("/My");
        }}
      >
        返回
      </p>
      {/* ------------分享途径------------ */}
      <div
        style={{
          width: "70%",
          textAlign: "center",
          height: "300px",
          position: "relative",
          background: "#439CDD",
          margin: "40px auto",
        }}
      >
        <p
          style={{
            fontSize: "30px",
            color: "#F7CD61",
            position: "relative",
            bottom: "20px",
            background: "#FF1C7F",
            padding: "10px 0",
          }}
        >
          好礼分享
        </p>
        <p
          style={{
            background: "#26C675",
            fontSize: "20px",
            color: "white",
            borderRadius: "20px",
            lineHeight: "50px",
            padding: "0 20px",
            width: "70%",
            margin: "20px auto",
          }}
        >
          我的邀请码：W1C75
        </p>
        <p
          style={{
            fontSize: "20px",
            background: "red",
            width: "70%",
            margin: "30px auto",
            borderRadius: "20px",
            padding: "10px 0",
          }}
        >
          通过二维码邀请好友
        </p>
        <p
          style={{
            fontSize: "20px",
            background: "red",
            width: "70%",
            margin: "auto",
            borderRadius: "20px",
            padding: "10px 0",
          }}
        >
          点击复制链接
        </p>
      </div>
      {/* ------------操作步骤------------ */}
      <div
        style={{
          width: "70%",
          height: "400px",
          background: "#2E139D",
          margin: "0 auto",
          textAlign: "center",
        }}
      >
        <p
          style={{
            color: "#2E139D",
            background: "#F7CD61",
            fontSize: "20px",
            fontWeight: 600,
            width: "40%",
            margin: "30px auto",
          }}
        >
          参与方式
        </p>
        <p
          style={{
            color: "#2E139D",
            width: "60%",
            margin: "20px auto",
            background: "white",
            padding: "20px 30px",
            borderRadius: "20px",
          }}
        >
          通过扫描二维码或者通过邀请码加入本平台即可获得活动奖励
        </p>
        <p
          style={{
            color: "#2E139D",
            background: "#F7CD61",
            fontSize: "20px",
            fontWeight: 600,
            width: "40%",
            margin: "30px auto",
          }}
        >
          活动奖励
        </p>
        <p
          style={{
            color: "#2E139D",
            width: "60%",
            margin: "20px auto",
            background: "white",
            padding: "20px 30px",
            borderRadius: "20px",
          }}
        >
          邀请一名好友双方都可获得一个月会员体验
        </p>
      </div>
    </div>
  );
}
